<template>
  <div class="totalbox">
    <div class="totalback contents">
      <h3 class="titles">门店管理</h3>
      <div class="finds">
        <div>
          <el-select v-model="selectvalue" placeholder="请选择搜索类型">
            <el-option label="店铺名称" value="name"></el-option>
            <el-option label="店铺地址" value="address"></el-option>
            <el-option label="店铺电话" value="telephone"></el-option>
            <el-option label="店铺描述" value="desc"></el-option>
            <el-option label="申请状态" value="status"></el-option>
          </el-select>
          <el-input placeholder="请输入内容" v-model="inputvalue"></el-input>
          <el-button icon="el-icon-search" circle @click="seekData"></el-button>
        </div>
        <el-button type="success" round @click="showAll">查看全部</el-button>
      </div>
      <el-table :data="shopData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="_id" label="店铺编号" width="220"></el-table-column>
        <el-table-column prop="name" label="店铺名称" width="150"></el-table-column>
        <el-table-column prop="address" label="店铺地址" width="150"></el-table-column>
        <el-table-column prop="telephone" label="店铺电话" width="150"></el-table-column>
        <el-table-column prop="desc" label="店铺描述" width="150"></el-table-column>
        <el-table-column prop="status" label="申请状态" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="setShop(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="removeShop(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dataPage.currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="dataPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataPage.totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { log } from "util";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "ShopManage"
);
export default {
  data() {
    return {
      shopDatas: [
        {
          _id: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          telephone: "qwedqwefeqfwe",
          desc: "asdasdasfd",
          status:""
        }
      ],
      data: {
        name: "",
        value: ""
      },
      selectvalue: "",
      inputvalue: ""
    };
  },
  mounted() {
    this.findShop({
      ...this.dataPage,
      data: this.data,
      adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
    }); //  查询
  },
  computed: {
    ...mapState(["shopData", "dataPage"]),
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    }
  },
  methods: {
    ...mapActions(["findShop", "remove"]),
    ...mapMutations(["setpageSize", "setcurrentPage"]),

    //    点击查询
    handleClick() {
      alert("button click");
    },

    //    条件搜索
    seekData() {
      if (this.selectvalue && this.inputvalue) {
        this.data = { name: this.selectvalue, value: this.inputvalue };
        this.findShop({
          ...this.dataPage,
          data: this.data,
          adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
        });
      }
    },

    ///    显示全部
    showAll() {
      this.dataPage.currentPage = 1;
      this.data = { name: "", value: "" };
      this.findShop({
        ...this.dataPage,
        data: this.data,
        adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
      });
    },

    //  修改每页几条数据
    handleSizeChange(val) {
      this.setpageSize(val);
      this.findShop({
        ...this.dataPage,
        data: this.data,
        adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
      });
    },

    //    修改当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.setcurrentPage(val);
      this.findShop({
        ...this.dataPage,
        data: this.data,
        adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
      });
    },

    //    跳转至修改
    setShop(index, row) {
      this.$router.push("/system/setShop/" + row._id);
    },
    //    删除
    removeShop(index, row) {
      this.remove({ _id: row._id });
      alert("删除成功!!");
      this.findShop({
        ...this.dataPage,
        data: this.data,
        adminstrator: { adminsId: JSON.parse(localStorage.usertoken1)._id }
      });
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
.finds {
  width: 100%;
  display: flex;
  background-color: rgb(255, 251, 212);
  border-bottom: 1px solid #f0f9eb;
  justify-content: space-between;
}
.finds > div {
  display: flex;
}
.el-table .success-row {
  background: #f0f9eb;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.contents {
  width: 1120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 2px 2px rgb(187, 148, 190);
  border-radius: 10px;
  overflow: hidden;
}
.contents th {
  background-color: rgb(246, 252, 253);
}
.contents tr:nth-child(3n) {
  background-color: rgb(255, 247, 247);
}
.contents tr:nth-child(3n + 1) {
  background-color: rgb(251, 255, 247);
}
.contents tr:nth-child(3n + 2) {
  background-color: rgb(247, 250, 255);
}
.totalbox {
  width: 100%;
  padding: 50px 0;
  background-color: rgb(235, 255, 248);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>